{"componentChunkName":"component---src-templates-post-tsx","path":"/github-deploy.md/","result":{"data":{"markdownRemark":{"html":"

GitHub Pages

\n

GitHub Pages는 GitHub Repository를 이용해 웹 사이트를 무료로 호스팅해주는 서비스입니다.

\n\n

1. 로컬 저장소에 Commit 하기

\n
$ git add .\n$ git commit -m \" Deploying to Github Pages\"
\n

지금까지 프로젝트의 파일 및 폴더의 추가/변경 사항을 로컬 저장소에 기록합니다.

\n

2. GiHub에 Repository 생성 (원격 저장소 생성)

\n\n \n \n \"github_repository\"\n \n \n

자신의 GitHub에 새로운 repository를 생성합니다

\n

3. 로컬 저장소와 원격 저장소 연결

\n

원격 저장소의 주소를 입력해 로컬 저장소와 원격 저장소를 연결해 줍니다.

\n
$ git remote add origin https://github.com/daeun012/deploy_test.git
\n

로컬 저장소에 기록 한 내용을 원격 저장소에 업로드 합니다.

\n
$ git push -u origin master
\n

4. gh-pages 패키지 설치

\n
$ npm install gh-pages
\n

5. package.json 수정

\n

package.json 파일에 "homepage": "https://{GitHub username}.github.io/{Repository name}/"을 추가해 주고,

\n
....\n\"browserslist\": {\n\"production\": [\n\">0.2%\",\n\"not dead\",\n\"not op_mini all\"\n],\n\"development\": [\n\"last 1 chrome version\",\n\"last 1 firefox version\",\n\"last 1 safari version\"\n]\n\n},\n\"homepage\": \"https://daeun012.github.io/deploy_test/\" //(*)\n}
\n

package.json의 "scripts" 부분에 "deploy": "gh-pages -d build", "predeploy": "npm run build"를 추가해 줍니다.

\n
...\n\"scripts\": {\n\"start\": \"react-scripts start\",\n\"build\": \"react-scripts build\",\n\"test\": \"react-scripts test\",\n\"eject\": \"react-scripts eject\",\n\"deploy\": \"gh-pages -d build\", //(*)\n\"predeploy\": \"npm run build\" //(*)\n},\n...
\n\n

마지막! GitHub Pages에 빌드 결과물 업로드

\n
$ npm run deploy
\n

hompage에 입력했던 주소로 접속하시면 프로젝트가 배포된 것을 볼 수 있을 겁니다.

\n
\n

Reference

\n

https://lktprogrammer.tistory.com/5

","excerpt":"GitHub Pages GitHub Pages는 GitHub Repository를 이용해 웹 사이트를 무료로 호스팅해주는 서비스입니다. 사용자가 GitHub Repository에 자신의 웹 프로젝트 빌드 결과물을 업로드 하면 GitHub가 그 결과물…","tableOfContents":"","fields":{"slug":"/github-deploy.md/"},"frontmatter":{"title":"GitHub Pages로 React 배포(Deploy)하기","date":"Apr 24, 2019","tags":["Github","React"],"keywords":["github","react","deploy"],"update":"Jan 01, 0001"}}},"pageContext":{"slug":"/github-deploy.md/","series":[],"lastmod":"2019-04-24"}},"staticQueryHashes":["2027115977","694178885"]}